<template>
  <div class="flow_box">
    <div class="flow_title">
      <el-tag type="danger" class="mx-1 text-[0.7rem]"> 流程指引 </el-tag>
    </div>

    <ul class="flow_container">
      <li
        v-for="(item, index) in flowList"
        :key="item.id"
        class="item"
        :class="{
          active: flowActiveIndex == item.id, // 激活状态
          success: flowActiveIndex > item.id, // 完成状态
        }"
        @click="handleClickFlow(item.id)"
      >
        <span> {{ index + 1 }}.{{ item.title }}</span>
        <span
          v-if="item.id == 1 && checkDetailForm && checkDetailForm.relationName"
          class="w-[5rem] ellipsis"
          :title="
            checkDetailForm && checkDetailForm.relationName
              ? ' : ' + checkDetailForm.relationName
              : ''
          "
        >
          {{
            checkDetailForm && checkDetailForm.relationName
              ? " : " + checkDetailForm.relationName
              : ""
          }}
        </span>
        <span
          v-if="item.id == 2 && checkDetailForm && checkDetailForm.code"
          class="min-w-[7rem] ellipsis"
          :title="
            checkDetailForm && checkDetailForm.code ? checkDetailForm.code : ''
          "
        >
          {{
            checkDetailForm && checkDetailForm.code
              ? ": " + checkDetailForm.code
              : ""
          }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";

onMounted(() => {});

const router = useRouter();
const userStore = useUserStore();
const { flowActiveIndex, checkDetailForm } = storeToRefs(userStore);

const handleClickFlow = (id) => {
  router.push({ name: "home_page" });

  userStore.updateCutStatus(2); // 切换到检查数据页(首页)

  if (id == 1) return userStore.updateFlowActiveIndex(1);

  if (!checkDetailForm.value || !checkDetailForm.value.relationId) {
    userStore.updateFlowActiveIndex(1);
    ElNotification({
      title: "提示",
      message: "请先选择客户",
      type: "warning",
      position: "top-right",
    });
    return;
  }

  if (id == 3 || id == 5) {
    if (!checkDetailForm.value || !checkDetailForm.value.id) {
      userStore.updateFlowActiveIndex(2);
      ElNotification({
        title: "提示",
        message: "请先选择检查单号",
        type: "warning",
        position: "top-right",
      });
      return;
    }
  }

  userStore.updateFlowActiveIndex(id); // 更新激活状态
};

const flowList = ref([
  {
    id: 1,
    title: "当前客户",
  },
  {
    id: 2,
    title: "检查",
  },
  {
    id: 3,
    title: "方案",
  },
  {
    id: 4,
    title: "销售",
  },
  {
    id: 5,
    title: "报告",
  },
]);
</script>

<style scoped lang="scss">
$bg_color: var(--theme-color); // 默认颜色 -->未激活状态
$hover_color: #ff2e63; // 鼠标悬浮颜色
$active_color: #ff2e63; // 激活状态颜色
$success_color: #abc1c4; // 完成状态颜色

.flow_box {
  background-color: $bg_color;
  @apply w-full h-[2rem] flex items-center box-border text-[0.7rem] text-[white];

  .flow_title {
    @apply w-[177px] h-full flex justify-center items-center;
  }
}

.flow_container {
  @apply h-full flex items-center justify-between;
  border-left: 1px solid white;
  border-right: 1px solid white;

  .item {
    background-color: $bg_color;
    @apply min-w-[7rem] h-full flex justify-center items-center relative px-[1rem] box-border font-semibold;

    &:hover {
      @apply cursor-pointer;
      background-color: $hover_color !important ;
    }
  }

  .item:hover.item::after {
    border-left-color: $hover_color !important;
  }

  .item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0%;
    right: 0;
    width: 0;
    height: 0;
    border: 1.03rem solid white;
    border-right-width: 0;
    border-left-width: 0.6rem;
    border-left-color: var(--theme-color);
    z-index: 20;
  }
  // 盒子左边的箭头
  .item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0px;
    width: 0;
    height: 0;
    border: 1rem solid transparent;
    border-left-width: 0.6rem;
    border-right-width: 0;
    border-left-color: white;
    z-index: 10;
  }
}

// 激活状态
.item.active {
  background: $active_color !important;
}
.item.active::after {
  border-left-color: $hover_color !important;
}

// 成功状态
.item.success {
  background: $success_color !important;
}
.item.success::after {
  border-left-color: $success_color !important;
}

.ellipsis {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
</style>